<template>
    <div class="item_box">
        <div class="item_icon" @click="addComponet('input')">
            <Icon type="md-create" size="18" color="#1055FF" />
            <div class="title">单行文本</div>
        </div>
        <div class="item_icon" @click="addComponet('textarea')">
            <Icon type="md-list" size="18" color="#1055FF" />
            <div class="title">多行文本</div>
        </div>
        <div class="item_icon" @click="addComponet('select')">
            <Icon type="md-code-download" size="18" color="#1055FF" />
            <div class="title">下拉选择</div>
        </div>
        <div class="item_icon" @click="addComponet('number')">
            <Icon type="ios-grid-outline" size="18" color="#1055FF" />
            <div class="title">数字</div>
        </div>
        <div class="item_icon" @click="addComponet('radio')">
            <Icon type="md-disc" size="18" color="#1055FF" />
            <div class="title">单选</div>
        </div>
        <div class="item_icon" @click="addComponet('checkbox')">
            <Icon type="md-checkbox-outline" size="18" color="#1055FF" />
            <div class="title">多选</div>
        </div>
        <div class="item_icon" @click="addComponet('timerange')">
            <Icon type="md-alarm" size="18" color="#1055FF" />
            <div class="title">时间范围</div>
        </div>
        <div class="item_icon" @click="addComponet('time')">
            <Icon type="md-time" size="18" color="#1055FF" />
            <div class="title">时间</div>
        </div>
        <div class="item_icon" @click="addComponet('daterange')">
            <Icon type="ios-calendar-outline" size="18" color="#1055FF" />
            <div class="title">日期范围</div>
        </div>
        <div class="item_icon" @click="addComponet('date')">
            <Icon type="md-calendar" size="18" color="#1055FF" />
            <div class="title">日期</div>
        </div>
        <div class="item_icon" @click="addComponet('upload')">
            <Icon type="ios-cloud-upload-outline" size="18" color="#1055FF" />
            <div class="title">上传文件</div>
        </div>
        <div class="item_icon" @click="addComponet('editor')">
            <Icon type="md-browsers" size="18" color="#1055FF" />
            <div class="title">富文本</div>
        </div>
        <div class="item_icon" @click="addComponet('switch')">
            <Icon type="md-options" size="18" color="#1055FF" />
            <div class="title">开关</div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { dynamicFormStore } from '@/store/dynamicForm';

const emit = defineEmits('addComponent');

const dynamicForm = dynamicFormStore();

/**
 * 添加组件
 * @param {
 *  type: 'input': 输入框, 'select': 下拉选择框, 'radio': 单选框, 'checkbox': 多选框, 'textarea': 文本框, 'editor': 富文本框, 'number': 数字, 'time': 时间, 'timerange': 时间范围, 'date': 日期, 'daterange': 日期范围, 'upload': 上传
 * }
 */
const addComponet = (type) => {
    // emit('addComponent', type);
    dynamicForm.addComponet(type);
}

</script>

<style scoped lang="scss">
.item_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item_icon {
        padding: 10px;
        background-color: #EBF3FF;
        width: 48%;
        height: 40px;
        display: flex;
        align-items: center;
        cursor: pointer;
        border-radius: 3px;
        margin-bottom: 15px;

        &:hover {
            background-color: #DFE4ED;
        }

        .title {
            margin-left: 10px;
        }
    }
}
</style>